<template>
  <div>
    <ConTitle :info="topTitle"/>
    <!--    tab栏-->
    <el-tabs type="border-card" class="gateway-tab" @tab-click="handleChangeTab">
      <el-tab-pane label="所有设备"></el-tab-pane>
      <el-tab-pane label="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="LoRaPP"></el-tab-pane>
      <div>
        <el-form ref="form" :model="query" label-width="80px">
          <el-form-item label="在线状态:">
            <el-select v-model="query.online" placeholder="在线状态">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="EUI:" class="eui">
            <el-input v-model="query.eui" placeholder="设备EUI">
            </el-input>
          </el-form-item>
          <!--          日期-->
          <el-form-item label="绑定时间">
            <el-date-picker
                v-model="query.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
          <el-button-group>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">搜索</el-button>
            <el-button type="primary" icon="el-icon-delete" size="mini" @click="handleclear">清空条件</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="handlerefersh">刷新</el-button>
          </el-button-group>
            <span>搜索结果:{{total}}</span>
          </el-form-item>
        </el-form>
      </div>
    </el-tabs>
    <!--    显示表格数据-->
    <el-table :data="gatewayList" border style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="eui" label="EUI" width="180"></el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="mhz" label="频率(MHz)"></el-table-column>
      <el-table-column label="在线状态">
        <template slot-scope="scope">
          {{ scope.row.online|onlineType }}
        </template>
      </el-table-column>
      <el-table-column prop="country" label="国家"></el-table-column>
      <el-table-column prop="agreement" label="组网协议类型"></el-table-column>
      <el-table-column prop="bTime" label="绑定时间">
        <template slot-scope="scope">
          {{ scope.row.uTime|format }}
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" class="pagination">
    </el-pagination>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import {$gatewayList} from "@/api/index.js";

export default {
  name: "gateway",
  components: {
    ConTitle,
  },
  data() {
    return {
      topTitle: {
        type: "设备",
        text: "网关列表",
        msg: "展示EUI、名称、状态等设备信息，可根据EUI、状态，和绑定时间等条件筛选具体的网关。"
      },
      gatewayList: [],
      activeName: "all",//默认 tab栏的打开状态
      //查询和分页传给后台的默认数据
      options: [
        {value: "all", label: "全部"},
        {value: true, label: "在线"},
        {value: false, label: "离线"},
      ],
      query: {
        currPage: 1,
        pageSize: 5,
        eui: "",
        online: "",
        agreement: "",
        date: [],
      },
      total: 0,//数据总数量
    };
  },
  computed: {
    dateStr() {
      let d1 = this.query.date[0];
      let d2 = this.query.date[1];
      let time1 = d1 && d1.getTime();
      let time2 = d2 && d2.getTime();
      if (time1 && time2) {
        return time1 + "-" + time2;
      } else {
        return "";
      }
    },
  },
  filters: {
    onlineType(value) {
      return value ? "在线" : "离线";
    },
    format(value) {
      function addZero(num) {
        return num >= 10 ? num : "0" + num;
      }

      var time = new Date(value);
      var y = time.getFullYear();
      var m = addZero(time.getMonth() + 1);
      var d = addZero(time.getDate());
      return `${y}-${m}-${d}`;
    },
  },
  created() {
    this.getGateWayList();
  },
  methods: {
    //提交表单的函数
    onSubmit() {
      console.log("表单提交了");
      this.query.currPage = 1;
      //重新获取数据
      this.getGateWayList();
      console.log(this.query);
    },
    //清除搜索条件
    handleclear() {
      this.query = {
        eui: "",
        online: "",
        agreement: "",
        date: [],
        currPage: 1,
        pageSize: 5,
      };
      this.getGateWayList();
    },
    handlerefersh() {
      this.$router.go(0);
    },
    //获取 网关列表数据的函数
    getGateWayList() {
      console.log(this.query);
      console.log(this.dateStr);
      var queryStr = {...this.query};
      if (this.dateStr != "") {
        queryStr.date = this.dateStr;
      }

      $gatewayList(queryStr).then((res) => {
        console.log(res);
        this.gatewayList = res.data.data;
        this.total = res.data.total;
      });
    },
    handleSizeChange(num) {
      console.log("显示条数", num);
      this.query.pageSize = num;
      this.query.currPage = 1;
      this.getGateWayList();
    },
    handleCurrentChange(num) {
      console.log("当前页", num);
      this.query.currPage = num;
      this.getGateWayList();
    },
    handleChangeTab(value){
      console.log(value);
      this.query.agreement=value.name;
      this.getGateWayList();
    },
  },
};
</script>

<style scoped lang="scss">
.gateway-tab {
  margin-bottom: 10px;
}

.pagination {
  text-align: center;
  background: white;
}
.eui{
  width: 400px;
}
</style>